<template>
  <div class="lawyer-contact page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3">
        <h1 class="text-xl font-bold text-gray-800">联系律师</h1>
      </div>
    </header>

    <div class="px-4 py-6">
      <!-- 跟案律师信息 -->
      <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center">
          <i class="fas fa-user-tie text-blue-600 mr-2"></i>跟案律师
        </h2>
        
        <div class="lawyer-info">
          <div class="flex items-start space-x-4">
            <img :src="primaryLawyer.avatar" :alt="primaryLawyer.name" 
                 class="w-16 h-16 rounded-full object-cover">
            <div class="flex-1">
              <div class="flex items-center justify-between mb-2">
                <h3 class="font-semibold text-gray-800">{{ primaryLawyer.name }}</h3>
                <span class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded-full">
                  主办律师
                </span>
              </div>
              
              <div class="space-y-1 text-sm text-gray-600">
                <div class="flex items-center">
                  <i class="fas fa-building mr-2 text-gray-400"></i>
                  <span>{{ primaryLawyer.firm }}</span>
                </div>
                <div class="flex items-center">
                  <i class="fas fa-medal mr-2 text-gray-400"></i>
                  <span>{{ primaryLawyer.experience }}</span>
                </div>
                <div class="flex items-center">
                  <i class="fas fa-award mr-2 text-gray-400"></i>
                  <span>{{ primaryLawyer.specialization }}</span>
                </div>
              </div>
              
              <div class="flex items-center mt-3">
                <div class="flex items-center mr-4">
                  <i class="fas fa-star text-yellow-400 mr-1"></i>
                  <span class="text-sm text-gray-600">{{ primaryLawyer.rating }}</span>
                </div>
                <div class="flex items-center">
                  <i class="fas fa-check-circle text-green-500 mr-1"></i>
                  <span class="text-sm text-gray-600">成功案例 {{ primaryLawyer.successCases }}件</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 联系方式 -->
      <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center">
          <i class="fas fa-phone text-blue-600 mr-2"></i>联系方式
        </h2>
        
        <div class="contact-methods space-y-3">
          <div class="contact-item">
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <div class="flex items-center">
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                  <i class="fas fa-phone text-green-600"></i>
                </div>
                <div>
                  <p class="font-medium text-gray-800">电话咨询</p>
                  <p class="text-sm text-gray-600">{{ primaryLawyer.phone }}</p>
                </div>
              </div>
              <button @click="callLawyer" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
                <i class="fas fa-phone mr-1"></i>拨打
              </button>
            </div>
          </div>
          
          <div class="contact-item">
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <div class="flex items-center">
                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                  <i class="fab fa-weixin text-blue-600"></i>
                </div>
                <div>
                  <p class="font-medium text-gray-800">微信联系</p>
                  <p class="text-sm text-gray-600">{{ primaryLawyer.wechat }}</p>
                </div>
              </div>
              <button @click="copyWechat" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                <i class="fas fa-copy mr-1"></i>复制
              </button>
            </div>
          </div>
          
          <div class="contact-item">
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <div class="flex items-center">
                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                  <i class="fas fa-envelope text-purple-600"></i>
                </div>
                <div>
                  <p class="font-medium text-gray-800">邮箱联系</p>
                  <p class="text-sm text-gray-600">{{ primaryLawyer.email }}</p>
                </div>
              </div>
              <button @click="sendEmail" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
                <i class="fas fa-envelope mr-1"></i>发送
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 工作时间 -->
      <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center">
          <i class="fas fa-clock text-blue-600 mr-2"></i>工作时间
        </h2>
        
        <div class="schedule-info">
          <div class="schedule-item flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0">
            <span class="text-gray-600">周一 - 周五</span>
            <span class="font-medium text-gray-800">09:00 - 18:00</span>
          </div>
          <div class="schedule-item flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0">
            <span class="text-gray-600">周六</span>
            <span class="font-medium text-gray-800">09:00 - 17:00</span>
          </div>
          <div class="schedule-item flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0">
            <span class="text-gray-600">周日</span>
            <span class="text-gray-500">休息（紧急情况除外）</span>
          </div>
          <div class="schedule-item flex items-center justify-between py-2">
            <span class="text-gray-600">紧急联系</span>
            <span class="font-medium text-red-600">{{ primaryLawyer.emergencyPhone }}</span>
          </div>
        </div>
        
        <div class="mt-4 p-3 bg-yellow-50 rounded-lg">
          <p class="text-sm text-yellow-800">
            <i class="fas fa-info-circle mr-1"></i>
            建议在工作时间内联系，紧急情况可拨打紧急联系电话
          </p>
        </div>
      </div>

      <!-- 律师团队 -->
      <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center">
          <i class="fas fa-users text-blue-600 mr-2"></i>律师团队
        </h2>
        
        <div class="team-members space-y-4">
          <div v-for="lawyer in teamLawyers" :key="lawyer.id" class="team-member">
            <div class="flex items-start space-x-3">
              <img :src="lawyer.avatar" :alt="lawyer.name" 
                   class="w-12 h-12 rounded-full object-cover">
              <div class="flex-1">
                <div class="flex items-center justify-between">
                  <h4 class="font-medium text-gray-800">{{ lawyer.name }}</h4>
                  <span class="text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded">
                    {{ lawyer.role }}
                  </span>
                </div>
                <p class="text-sm text-gray-600 mt-1">{{ lawyer.specialization }}</p>
                <div class="flex items-center mt-2 space-x-4">
                  <button @click="contactTeamMember(lawyer)" 
                          class="text-blue-600 text-sm hover:text-blue-700">
                    <i class="fas fa-phone mr-1"></i>{{ lawyer.phone }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 最近联系记录 -->
      <div class="bg-white rounded-xl shadow-sm p-4">
        <h2 class="text-lg font-semibold mb-4 text-gray-800 flex items-center">
          <i class="fas fa-history text-blue-600 mr-2"></i>最近联系记录
        </h2>
        
        <div class="contact-history">
          <div v-for="record in contactHistory" :key="record.id" 
               class="history-item flex items-start space-x-3 py-3 border-b border-gray-100 last:border-b-0">
            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
              <i :class="getContactIcon(record.type)" class="text-blue-600 text-sm"></i>
            </div>
            <div class="flex-1">
              <div class="flex items-center justify-between">
                <span class="font-medium text-gray-800">{{ record.title }}</span>
                <span class="text-xs text-gray-500">{{ formatDate(record.date) }}</span>
              </div>
              <p class="text-sm text-gray-600 mt-1">{{ record.description }}</p>
              <div class="flex items-center mt-2">
                <span class="text-xs text-gray-500">联系人：{{ record.contact }}</span>
                <span class="text-xs text-gray-400 ml-2">持续时间：{{ record.duration }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import dayjs from 'dayjs'

export default {
  name: 'LawyerContact',
  setup() {
    // 主办律师信息
    const primaryLawyer = ref({
      id: 1,
      name: '李卫民',
      firm: '金诚律师事务所',
      experience: '从业15年',
      specialization: '交通事故专业律师',
      rating: 4.9,
      successCases: 156,
      avatar: 'https://via.placeholder.com/64x64?text=李',
      phone: '138-0013-2468',
      wechat: 'lawyer_liwm',
      email: 'liwm@jincheng-law.com',
      emergencyPhone: '139-0013-2468'
    })

    // 团队律师
    const teamLawyers = ref([
      {
        id: 2,
        name: '张明华',
        role: '协办律师',
        specialization: '保险理赔专家',
        avatar: 'https://via.placeholder.com/48x48?text=张',
        phone: '138-0013-2469'
      },
      {
        id: 3,
        name: '王丽娟',
        role: '法务助理',
        specialization: '案件材料整理',
        avatar: 'https://via.placeholder.com/48x48?text=王',
        phone: '138-0013-2470'
      }
    ])

    // 联系记录
    const contactHistory = ref([
      {
        id: 1,
        type: 'phone',
        title: '电话咨询案件进展',
        description: '询问伤残鉴定结果，律师告知下周可以取报告',
        contact: '李卫民律师',
        duration: '15分钟',
        date: '2024-01-20 14:30:00'
      },
      {
        id: 2,
        type: 'wechat',
        title: '微信沟通材料补充',
        description: '律师要求补充最新的医疗费发票',
        contact: '李卫民律师',
        duration: '20分钟',
        date: '2024-01-18 10:15:00'
      },
      {
        id: 3,
        type: 'email',
        title: '邮件发送鉴定材料',
        description: '向律师发送了最新的医疗检查报告',
        contact: '王丽娟助理',
        duration: '5分钟',
        date: '2024-01-16 16:20:00'
      }
    ])

    // 拨打电话
    const callLawyer = () => {
      window.location.href = `tel:${primaryLawyer.value.phone}`
    }

    // 复制微信号
    const copyWechat = () => {
      navigator.clipboard.writeText(primaryLawyer.value.wechat).then(() => {
        alert('微信号已复制到剪贴板')
      }).catch(() => {
        alert('复制失败，请手动复制：' + primaryLawyer.value.wechat)
      })
    }

    // 发送邮件
    const sendEmail = () => {
      window.location.href = `mailto:${primaryLawyer.value.email}?subject=案件咨询&body=您好，我想咨询案件相关事宜。`
    }

    // 联系团队成员
    const contactTeamMember = (lawyer) => {
      window.location.href = `tel:${lawyer.phone}`
    }

    // 获取联系方式图标
    const getContactIcon = (type) => {
      const iconMap = {
        phone: 'fas fa-phone',
        wechat: 'fab fa-weixin',
        email: 'fas fa-envelope',
        meeting: 'fas fa-handshake'
      }
      return iconMap[type] || 'fas fa-comment'
    }

    // 格式化日期
    const formatDate = (date) => {
      return dayjs(date).format('MM-DD HH:mm')
    }

    return {
      primaryLawyer,
      teamLawyers,
      contactHistory,
      callLawyer,
      copyWechat,
      sendEmail,
      contactTeamMember,
      getContactIcon,
      formatDate
    }
  }
}
</script>

<style scoped>
.lawyer-contact {
  background-color: #f8fafc;
  min-height: 100vh;
}

.lawyer-info {
  border-radius: 8px;
}

.contact-methods {
  max-width: 100%;
}

.contact-item {
  width: 100%;
}

.schedule-info {
  background-color: #f9fafb;
  border-radius: 8px;
  padding: 16px;
}

.team-member {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #f9fafb;
}

.history-item:last-child {
  padding-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .contact-item .flex {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .contact-item button {
    width: 100%;
  }
}
</style>

